<template>
  <div class="card glass m-6 bg-purple-300">
    <!-- <img class="w-[100%] h-auto rounded-2xl"
      src="https://image.xiaosaturn.com/Photo/202468/191429/igblj5pama1717845269444.png" alt="car!" /> -->
    <div class="card-body">
      <div class="flex flex-col items-center justify-center p-6 text-[60px] text-[#f15a22] font-bold">
        <div>暖暖18周岁之前生活学习计划记录</div>
        <div>今天我 {{ state.myYearsOld }} 天啦</div>
      </div>
      <div class="font-bold text-[20px] flex justify-center">
        <ul class="timeline">
          <li>
            <div class="timeline-start timeline-box text-[#f15a22]">2024年3月27号，我出生啦</div>
            <div class="timeline-middle">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                class="w-5 h-5 text-[#f15a22]">
                <path fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                  clip-rule="evenodd" />
              </svg>
            </div>
            <hr class="bg-[#f15a22]" />
          </li>
          <li class="mx-2">
            <hr class="bg-[#f15a22]" />
            <div class="timeline-middle">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                <path fill="#f15a22"
                  d="M4 8a2 2 0 1 1-4 0a2 2 0 0 1 4 0m6 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0m4 2a2 2 0 1 0 0-4a2 2 0 0 0 0 4" />
              </svg>
            </div>
            <hr class="bg-[#f15a22]" />
          </li>
          <li>
            <hr class="bg-[#f15a22]" />
            <div class="timeline-middle">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                class="w-5 h-5 text-[#f15a22]">
                <path fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                  clip-rule="evenodd" />
              </svg>
            </div>
            <div class="timeline-end timeline-box text-[#f15a22]">最近事情</div>
            <hr class="bg-[#f15a22]" />
          </li>
          <li class="mx-2">
            <hr class="bg-[#f15a22]" />
            <div class="timeline-middle">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                <path fill="#f15a22"
                  d="M4 8a2 2 0 1 1-4 0a2 2 0 0 1 4 0m6 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0m4 2a2 2 0 1 0 0-4a2 2 0 0 0 0 4" />
              </svg>
            </div>
            <hr class="bg-[#f15a22]" />
          </li>
          <li>
            <hr class="bg-[#f15a22]" />
            <div class="timeline-start timeline-box flex flex-col">
              <div>现在时间：</div>
              <div>{{ state.dateTimeStr }}</div>
            </div>
            <div class="timeline-middle">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                class="w-5 h-5 text-[#f15a22]">
                <path fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                  clip-rule="evenodd" />
              </svg>
            </div>
            <hr />
          </li>
          <li class="mx-2">
            <div class="timeline-middle">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                <path fill="rgb(229,230,230)"
                  d="M4 8a2 2 0 1 1-4 0a2 2 0 0 1 4 0m6 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0m4 2a2 2 0 1 0 0-4a2 2 0 0 0 0 4" />
              </svg>
            </div>
          </li>
          <li>
            <hr />
            <div class="timeline-middle">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
                <path fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                  clip-rule="evenodd" />
              </svg>
            </div>
            <div class="timeline-end timeline-box">下一件将要做的事情</div>
            <hr />
          </li>
          <li class="mx-2">
            <div class="timeline-middle">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                <path fill="rgb(229,230,230)"
                  d="M4 8a2 2 0 1 1-4 0a2 2 0 0 1 4 0m6 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0m4 2a2 2 0 1 0 0-4a2 2 0 0 0 0 4" />
              </svg>
            </div>
          </li>
          <li>
            <hr />
            <div class="timeline-start timeline-box">2042年6月7号，我要高考啦</div>
            <div class="timeline-middle">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
                <path fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                  clip-rule="evenodd" />
              </svg>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import BlogHero from "vuepress-theme-hope/blog/components/BlogHero.js";
import { displayDateTime } from '../utils/datetime.ts'
import { onMounted, reactive } from 'vue'

const state = reactive({
  randomAvatar: 'https://image.xiaosaturn.com/Photo/2023920/170044/jvgv529yyadefault-avatar.png',
  dateTimeStr: '',
  myYearsOld: 0,
})

const getCurrentDateTime = () => {
  state.dateTimeStr = displayDateTime();
  setInterval(() => {
    state.dateTimeStr = displayDateTime();
  }, 1000);
}

const myDays = () => {
  const today = new Date();
  const otherDate = new Date("2024-03-27"); // 这里填写你要计算的日期
  const diffTime = Math.abs(otherDate - today);
  state.myYearsOld = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
}

onMounted(async () => {
  getCurrentDateTime();
  myDays();
})
</script>
